<template>
  <div>
    <div class="body">
      <div class="action">
        <a-input-search allow-clear placeholder="搜索渠道名称" style="width: 225px" @search="inputChange" />
        <a-button type="primary" @click="showAdd">
          <a-icon type="plus" />
          新增渠道
        </a-button>
      </div>
      <div class="tableBox">
        <a-table rowKey="id" :columns="columns" :data-source="dataList" :pagination="pagination" @change="handleTableChange">
          <a slot="numberPeople" slot-scope="text, record" @click="showDetail(record)">
            <span class="primary">
              {{ text }}
            </span>
          </a>
          <a slot="action" slot-scope="text, record">
            <span class="primary" @click="handleEditOk(record)">
              编辑
            </span>
            <a-divider type="vertical" />
            <span class="primary" @click="showDelete(record)">
              删除
            </span>
          </a>
        </a-table>
      </div>
      <div class="drawerBox">
        <a-modal :title="title" :visible="visible" @ok="handleAddOK" @cancel="onClose">
          <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item
              ref="name"
              label="渠道名称"
              prop="name"
              :rules="{
                required: true,
                message: '请输入'
              }"
            >
              <a-input v-model="form.name" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item
              ref="phone"
              label="联系电话"
              prop="phone"
              :rules="{
                validator: validatorPhone
              }"
            >
              <a-input v-model="form.phone" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item
              ref="idcard"
              label="身份证号"
              prop="idcard"
              :rules="{
                validator: validatorIdCard
              }"
            >
              <a-input v-model="form.idcard" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item ref="name" label="银行卡号" prop="name">
              <a-input v-model="form.bankNo" placeholder="请输入" />
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </div>
      <a-modal title="删除预登记人员" :visible="deleteVisible" @ok="deleteOk" @cancel="handleCancel">
        <div style="display: flex;justify-content: space-around;">
          <a-icon type="question-circle" style="font-size:28px;color:#6A66F6" />
          <p style=" font-size: 16px;font-weight: 500;color: #3c3d43;line-height: 20px;margin-left:20px">
            您确定要删除该渠道吗？一旦删除不可恢复，该渠道下招工的人员将自动变为无渠道人员
          </p>
        </div>
      </a-modal>

      <a-modal :title="title2 + '招工详情'" :visible="detailVisible" :footer="null" @cancel="detailCancel" :width="600">
        <div>
          <a-input-search allow-clear placeholder="搜索姓名/手机号" style="width: 175px" @search="inputChange2" />
          <a-select allowClear placeholder="请选择" @change="selectCheck2" style="width: 175px;margin-left:20px">
            <a-select-option value="1">
              已报到
            </a-select-option>
            <a-select-option value="2">
              未报到
            </a-select-option>
          </a-select>
        </div>
        <div class="tableBox">
          <a-table
            :scroll="{ x: 600 }"
            rowKey="id"
            :columns="columns2"
            :data-source="dataList2"
            :pagination="pagination2"
            @change="handleTableChange2"
          >
            <a slot="status" slot-scope="text">
              <div
                style="text-align: center;width:50px;height: 20px;background: rgba(0, 0, 0, 0.04);border-radius: 2px;border: 1px solid rgba(0, 0, 0, 0.15);font-size: 11px;font-weight: 400;color: #767885;"
                v-if="text === 2"
              >
                未报到
              </div>
              <div
                style="text-align: center;width:50px;height: 20px;background: rgba(36, 205, 170, 0.1);border-radius: 2px;border: 1px solid #24cdaa;font-size: 11px;font-weight: 400;color: #24cdaa;"
                v-if="text === 1"
              >
                已报到
              </div>
            </a>
          </a-table>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "渠道名称",
    dataIndex: "name",
    key: "name",
    width: 100
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    key: "phone",
    width: 120
  },
  {
    title: "身份证号",
    dataIndex: "idcard",
    key: "idcard",
    width: 120
  },
  {
    title: "银行卡号",
    dataIndex: "bankNo",
    key: "bankNo",
    width: 100
  },
  {
    title: "渠道招工人数",
    dataIndex: "numberPeople",
    key: "numberPeople",
    width: 100,
    scopedSlots: { customRender: "numberPeople" }
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
    width: 100
  }
];
const columns2 = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: 100
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    key: "phone",
    width: 120
  },
  {
    title: "最近入职时间",
    dataIndex: "idcard",
    key: "idcard",
    width: 150
  },
  {
    title: "当前用工单位",
    dataIndex: "bankNo",
    key: "bankNo",
    width: 150
  },
  {
    title: "人员状态",
    dataIndex: "status",
    key: "status",
    width: 100,
    scopedSlots: { customRender: "status" }
  }
];
import { getChannels, addChannels, editChannels, deleteChannels, getChannelsDetail, getPrePersonnel } from "@/api/outsourcing/outsourcing";
export default {
  data() {
    const validatorPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号!"));
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error("手机号格式不正确!"));
        } else {
          callback();
        }
      }
    };
    const validatorIdCard = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入身份证号!"));
      } else {
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
          callback(new Error("身份证号格式不正确!"));
        } else {
          callback();
        }
      }
    };
    return {
      validatorPhone,
      validatorIdCard,
      columns2,
      title2: null,
      channelId: null,
      title: "新增渠道",
      visible: false,
      deleteVisible: false,
      dataList: [],
      dataList2: [],
      columns,
      detailVisible: false,
      form: {},
      status: null,
      channelName: null,
      nameOrPhoneOrIdcard: null,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        editCompanyName: null,
        ticketRecord: null,
        receivableRecord: null
      },
      pagination2: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        editCompanyName: null,
        ticketRecord: null,
        receivableRecord: null
      }
    };
  },
  created() {
    this.getChannelsList();
  },
  methods: {
    // 查询详情
    showDetail(e) {
      this.title2 = e.name;
      this.channelId = e.id;
      this.getPrePersonnelList();
    },
    inputChange2(e) {
      this.nameOrPhoneOrIdcard = e;
      this.getPrePersonnelList();
    },
    selectCheck2(e) {
      this.status = e;
      this.getPrePersonnelList();
    },
    getPrePersonnelList() {
      getPrePersonnel({
        nameOrPhoneOrIdcard: this.nameOrPhoneOrIdcard ? this.nameOrPhoneOrIdcard : null,
        status: this.status ? this.status : null,
        channelId: this.channelId ? this.channelId : null,
        pageNo: this.pagination2.current,
        pageSize: this.pagination2.pageSize
      }).then(res => {
        this.detailVisible = true;
        this.dataList2 = res.data.entities;
      });
    },

    detailCancel() {
      this.detailVisible = false;
    },
    // 删除渠道
    showDelete(e) {
      this.deleteId = e.id;
      this.deleteVisible = true;
    },
    deleteOk(e) {
      deleteChannels(this.deleteId).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
        this.deleteVisible = false;
        this.getChannelsList();
      });
    },
    handleCancel() {
      this.deleteVisible = false;
    },
    // 编辑渠道
    handleEditOk(e) {
      this.title = "编辑渠道";
      this.form = {};
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
        this.form = JSON.parse(JSON.stringify(e));
      });
    },
    // 新增编辑渠道点击确定
    handleAddOK() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.title === "新增渠道") {
            addChannels(this.form).then(res => {
              this.$notification["success"]({
                message: "success",
                description: "添加成功"
              });
              this.visible = false;
              this.getChannelsList();
            });
          }
          if (this.title === "编辑渠道") {
            editChannels(this.form).then(res => {
              this.$notification["success"]({
                message: "success",
                description: "编辑成功"
              });
              this.visible = false;
              this.getChannelsList();
            });
          }
        } else {
          return false;
        }
      });
    },
    // 分页查询渠道
    getChannelsList() {
      getChannels({
        name: this.channelName ? this.channelName : null,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize
      }).then(res => {
        this.dataList = res.data.entities;
      });
    },
    // 控制新增编辑框
    showAdd() {
      this.title = "新增渠道";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
        this.form = {};
      });
    },
    onClose() {
      this.visible = false;
    },
    // 搜索框
    inputChange(e) {
      this.channelName = e;
      this.getChannelsList();
    },
    // 分页器
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getChannelsList();
    },
    handleTableChange2(pagination, filters, sorter) {
      this.pagination2.current = pagination.current;
      this.pagination2.pageSize = pagination.pageSize;
      this.getPrePersonnelList();
    }
  }
};
</script>

<style lang="scss" scoped>
.tableBox {
  margin-top: 24px;
}
.body {
  padding: 24px;
  .title {
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    padding-bottom: 24px;
  }
  .action {
    display: flex;
    justify-content: space-between;
  }
  .tableBox {
    margin-top: 24px;
  }
}
</style>
